﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WiewProyecto.aspx.cs" Inherits="Proyectos_Seguimiento_WiewProyecto" %>

<%--<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>--%>
<%@ Register Src="wucSeguimiento.ascx" TagName="wucSeguimiento" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
            div#vacio
            {
	            background-color: #e4e4e4;
	            border: 1px solid black;
	            width: 270px;
	            padding: 0px;
	            padding-top: 0px;
	            padding-left: 0px;
	            padding-right: 0px;
	            padding-bottom: 0px;
            }
 
            div#div_completado
            {
	            position: relative;
	            top: 0px;
	            left: 0px;
	            background-color: #9af;
	            width: 0px;
	            padding-top: 5px;
	            padding: 0px;
            }
 
            div#div_barra
            {
	            position: relative;
	            top: 0px;
	            left: 2px;
	            color: #000;
	            padding: 0px;
	            padding-top: 0px;
	            font-family: Verdana, Geneva, sans-serif;
	            font-size: 14px;
            }
 
            div#div_boton
            {
	            position: relative;
	            top: 0px;
	            left: 0px;
	            height: 30px;
	            text-align: center;
	            padding: 0px;
	            padding-top: 5px;
	            font-family: Verdana, Geneva, sans-serif;
	            font-size: 14px;
            }
</style>
</head>
<body>
    <script type="text/javascript" language="javascript" src="../../resources/utilidades.js"></script>
    <form id="form1" runat="server">
    <ext:Store ID="StoreProgramas" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="Key">
                <Fields>
                    <ext:RecordField Name="Value">
                    </ext:RecordField>
                    <ext:RecordField Name="Key">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="StoreEstado" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="Key">
                <Fields>
                    <ext:RecordField Name="Value">
                    </ext:RecordField>
                    <ext:RecordField Name="Key">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="StoreEje" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="Key">
                <Fields>
                    <ext:RecordField Name="Value">
                    </ext:RecordField>
                    <ext:RecordField Name="Key">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="StoreTipo" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="Key">
                <Fields>
                    <ext:RecordField Name="Value">
                    </ext:RecordField>
                    <ext:RecordField Name="Key">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="StoreProyectos" runat="server" OnRefreshData="StoreRefresh" AutoLoad="false">
        <Reader>
            <ext:JsonReader IDProperty="Id">
                <Fields>
                    <ext:RecordField Name="Id" />
                    <ext:RecordField Name="Nombre" />
                    <ext:RecordField Name="FechaInicio" Type="Date" DateFormat="Y-m-dTh:i:s" />
                    <ext:RecordField Name="FechaFin" Type="Date" DateFormat="Y-m-dTh:i:s" />
                    <ext:RecordField Name="Presupuesto" />
                    <ext:RecordField Name="Latitud" />
                    <ext:RecordField Name="Longitud" />
                    <ext:RecordField Name="Estado" />
                    <ext:RecordField Name="Tipo" />
                    <ext:RecordField Name="Saldo" />
                    <ext:RecordField Name="UltimoPago" />
                    <ext:RecordField Name="Descripcion" />
                    <ext:RecordField Name="AportePlan" />
                    <ext:RecordField Name="PorcentajeAvance" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <Proxy>
            <ext:PageProxy></ext:PageProxy>
        </Proxy>
        <BaseParams>
			<ext:Parameter Name="cbxProgramas_bprm" Value="#{cbxProgramas}.getValue()"   Mode="Raw" />
			<ext:Parameter Name="cbxEje_bprm" Value="#{cbxEje}.getValue()"   Mode="Raw" />	
            <ext:Parameter Name="cbxCategorias_bprm" Value="#{cbxCategorias}.getValue()"   Mode="Raw" />
            <ext:Parameter Name="cbxEstado_bprm" Value="#{cbxEstado}.getValue()"   Mode="Raw" />	
            <ext:Parameter Name="txtNombrePrograma_bprm" Value="#{txtNombrePrograma}.getValue()"   Mode="Raw" />
        </BaseParams>
    </ext:Store>
    <script type="text/javascript">
          var columnaRenderer = function(value) {
                var r = <%= this.StoreEstado.ClientID %>.getById(value);

                if (Ext.isEmpty(r)) {
                    return value;
                }

                return r.data['Value'];
            };
            var columnaRendererTipo = function(value) {
                var r = <%= this.StoreTipo.ClientID %>.getById(value);

                if (Ext.isEmpty(r)) {
                    return value;
                }

                return r.data['Value'];
            };
    </script>
    <ext:ResourceManager ID="smPerfiles" runat="server" Theme="Slate" />
    <ext:Panel ID="Panel1" BodyStyle="padding:15px;background-color:#E7E4DD;" runat="server"
        AutoHeight="true">
        <Items>
            <ext:Panel ID="Panel2" runat="server" BodyStyle="background-color:Transparent;" Layout="Column"
                Height="110" ButtonAlign="Center">
                <Items>
                    <ext:Panel ID="Panel3" ColumnWidth=".33" Layout="Form" runat="server" Border="false"
                        Header="false" BodyStyle="padding:10px;background-color:Transparent;">
                        <Items>
                            <ext:ComboBox Editable="false" FieldLabel="Eje" ID="cbxEje" StoreID="StoreEje" runat="server"
                                AnchorHorizontal="95%" DisplayField="Value" ValueField="Key" TypeAhead="true"
                                ForceSelection="true" TriggerAction="All" Grow="true" GrowMax="300" EmptyText="Todos"
                                SelectOnFocus="true" AutoDataBind="True">
                                 <Triggers>
                                                                <ext:FieldTrigger Icon="Clear" />
                                                            </Triggers>
                                                            <Listeners>
                                                                 <Select Handler="this.triggers[0].show();" />
                                                                  <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                                                  <AfterRender Handler="this.triggers[0][ Ext.isEmpty(this.getValue()) ? 'hide' : 'show']();" />
                                                                  <TriggerClick Handler="if(index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
                                                            </Listeners>
                            </ext:ComboBox>
                            <ext:ComboBox Editable="false" FieldLabel="Estado" ID="cbxEstado" runat="server"
                                AnchorHorizontal="95%" StoreID="StoreEstado" DisplayField="Value" ValueField="Key"
                                TypeAhead="true" ForceSelection="true" TriggerAction="All" Grow="true" GrowMax="300"
                                EmptyText="Todos" SelectOnFocus="true" AutoDataBind="True">
                                <Triggers>
                                                                <ext:FieldTrigger Icon="Clear" />
                                                            </Triggers>
                                                            <Listeners>
                                                                 <Select Handler="this.triggers[0].show();" />
                                                                  <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                                                  <AfterRender Handler="this.triggers[0][ Ext.isEmpty(this.getValue()) ? 'hide' : 'show']();" />
                                                                  <TriggerClick Handler="if(index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
                                                            </Listeners>
                            </ext:ComboBox>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel4" ColumnWidth="0.34" Layout="Form" Height="50" runat="server"
                        Border="false" BodyStyle="padding:10px;background-color:Transparent;">
                        <Items>
                            <ext:ComboBox Editable="false" FieldLabel="Programa" ID="cbxProgramas" runat="server"
                                AnchorHorizontal="95%" StoreID="StoreProgramas" DisplayField="Value" ValueField="Key"
                                TypeAhead="true" ForceSelection="true" TriggerAction="All" Grow="true" GrowMax="300"
                                EmptyText="Todos" SelectOnFocus="true" AutoDataBind="True">
                                 <Triggers>
                                                                <ext:FieldTrigger Icon="Clear" />
                                                            </Triggers>
                                                            <Listeners>
                                                                 <Select Handler="this.triggers[0].show();" />
                                                                  <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                                                  <AfterRender Handler="this.triggers[0][ Ext.isEmpty(this.getValue()) ? 'hide' : 'show']();" />
                                                                  <TriggerClick Handler="if(index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
                                                            </Listeners>
                            </ext:ComboBox>
                            <ext:TextField FieldLabel="Nombre" ID="txtNombrePrograma" runat="server" AnchorHorizontal="95%" />
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel5" ColumnWidth=".33" Layout="Form" Height="50" runat="server"
                        Border="false" BodyStyle="padding:10px;background-color:Transparent;">
                        <Items>
                            <ext:ComboBox Editable="false" FieldLabel="Tipo" ID="cbxCategorias" StoreID="StoreTipo"
                                AnchorHorizontal="95%" runat="server" DisplayField="Value" ValueField="Key" TypeAhead="true"
                                ForceSelection="true" TriggerAction="All" Grow="true" GrowMax="300" EmptyText="Todos"
                                SelectOnFocus="true" AutoDataBind="True">
                                <Triggers>
                                                                <ext:FieldTrigger Icon="Clear" />
                                                            </Triggers>
                                                            <Listeners>
                                                                 <Select Handler="this.triggers[0].show();" />
                                                                  <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                                                  <AfterRender Handler="this.triggers[0][ Ext.isEmpty(this.getValue()) ? 'hide' : 'show']();" />
                                                                  <TriggerClick Handler="if(index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
                                                            </Listeners>
                            </ext:ComboBox>
                        </Items>
                    </ext:Panel>
                </Items><Buttons>
                    <ext:Button runat="server" ID="btnBuscar" Text="Buscar" Icon="Find">
                         <%--
                        <DirectEvents>
                            <Click OnEvent="btnBuscar_Click">
                                <EventMask ShowMask="true" />
                            </Click>
                        </DirectEvents>
                         --%>
                        <Listeners>
                          <Click Handler="#{StoreProyectos}.load();" />
                        </Listeners>

                    </ext:Button></Buttons>
            </ext:Panel>
        </Items>
    </ext:Panel>
    <ext:GridPanel runat="server" Border="false" ID="gpProyecto" StoreID="StoreProyectos"
        Height="380" AutoExpandColumn="Descripcion" EnableColumnHide="false" StripeRows="true"
        TrackMouseOver="true" Title="Listado de Proyectos">
        <ColumnModel ID="clmBuscarPerfilProyecto" runat="server">
            <Columns>
                <ext:CommandColumn  Width="30">
                    <Commands>
                        <ext:GridCommand ToolTip-Text="Seguimiento del Proyecto" Icon="PageEdit" CommandName="Editar">
                        </ext:GridCommand>
                    </Commands>
                </ext:CommandColumn>

                <ext:Column ColumnID="NombreProyecto" Header="Proyecto" Width="200" DataIndex="Nombre" />
                <ext:Column DataIndex="Tipo" Header="Tipo" Width="100">
                    <Renderer Fn="columnaRendererTipo" />
                </ext:Column>
                <ext:Column DataIndex="Estado" Header="Estado" Width="90">
                    <Renderer Fn="columnaRenderer" />
                </ext:Column>
                <ext:Column ColumnID="Descripcion" Header="Descripcion" Width="100" DataIndex="Descripcion">
                </ext:Column>
                <ext:Column Header="Saldo por desembolsar" Width="140" DataIndex="Saldo">
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:Column Header="Ultimo Pago" Width="120" DataIndex="UltimoPago">
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:Column ColumnID="ID" Header="Avance" DataIndex="PorcentajeAvance" Width="300">
                                    <Renderer Fn="GetDinamicImage" />
               </ext:Column>
               
            </Columns>
        </ColumnModel>
        <LoadMask ShowMask="true" />
        <SaveMask ShowMask="true" />        
        <DirectEvents>
            <Command OnEvent="Editar_Click">
                <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{gpProyecto}.body}" />
                <ExtraParams>
                    <ext:Parameter Name="id" Value="record.data.Id" Mode="Raw" />
                </ExtraParams>
            </Command>
        </DirectEvents>
        <SelectionModel>
            <ext:RowSelectionModel ID="rsmProyecto" runat="server" />
        </SelectionModel>
        <View>
            <ext:GridView ID="GridView1" runat="server" ForceFit="true" />
        </View>
        <Plugins>
            <ext:RowExpander ID="RowExpander1" runat="server" Collapsed="true">
                <Template ID="Template1" runat="server">
                    <Html>
                        <p><b>Proyecto:</b> {Nombre}</p>
                        <br />
                        <p><b>Descripci&oacute;n:</b> {Descripcion}</p>
                    </Html>
                </Template>
            </ext:RowExpander>
        </Plugins>
        <BottomBar>
            <ext:PagingToolbar ID="ptbProyecto" runat="server" StoreID="StoreProyectos" DisplayInfo="true"
                DisplayMsg="Proyectos {0} - {1} de {2}" EmptyMsg="No existen Proyectos" />
        </BottomBar>
    </ext:GridPanel>
    <uc1:wucSeguimiento runat="server" ID="wucSeguimiento1" />
    </form>
</body>
</html>
 <script type="text/javascript" language="javascript">
     var GetDinamicImage = function (value) {
         value = value;
         width = (value / 100) * 270;
         return "<div align='center'><div id='vacio' align='left'> <div id='div_completado' style='width : " + width + "px;'><div id='div_barra'>" + value + "%</div></div> </div></div>";
     }

</script>